<template>
  <div @click.stop="$parent.$parent.onEditer(index)">
    <div class="drag optional" :class="{selected:index === selectedIndex}">
      <div class="diy-special">
        <div class="special-left">
          <img v-img-url="item.style.image" alt="">
        </div>
        <div class="special-content" :class="'display_' + item.style.display">
          <ul class="special-content-list">
            <li v-for="(itemTemp, indexTemp) in (item.params.source === 'choice' ? item.data : item.defaultData)" :key="indexTemp" class="content-item text-ellipsis">
              <span>{{ itemTemp.article_title }}</span>
            </li>
          </ul>
        </div>
        <div class="special-more">
          <i class="el-icon-arrow-right" />
        </div>
      </div>
      <div class="btn-edit-del">
        <div class="btn-del" @click.stop="$parent.$parent.onDeleleItem(index)">删除</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ['item', 'index', 'selectedIndex'],
  data() {
    return {
    }
  },
  methods: {
  }
}
</script>

<style>
.diy-special{ padding: 4px; display: flex; justify-content: space-between; align-items: center;}
.diy-special .special-left{ width: 68px; height: 16px;}
.diy-special .special-left img{ width: 100%; height: 100%;}
.diy-special .special-more{ font-size: 18px;}
.diy-special .special-content{ flex: 1; margin: 0 10px; overflow: hidden;}
.diy-special .content-item{ padding: 4px 0;}
.diy-special .special-content.display_1{ height: 22px;}
.diy-special .special-content.display_2{ height: 44px;}
</style>
